<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<title>Spring MVC Form Handling</title>
<link href="<c:url value="/resources/css/ui.jqgrid.css" />"
	rel="stylesheet" type="text/css" />

<script src="<c:url value="/resources/js/jquery-1.11.1.js"/>"></script>
<script src="<c:url value="/resources/js/jquery.jqGrid.min.js"/>"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var message = $('#message').val();
		if (message === 'true') {
			$('#lblmsgsucess').text('add sucessful!');
		} else if (message === 'false') {
			$('#lblmsgfail').text('add failde!');
		}

		$("#grid").jqGrid({
			url : 'mydata.json',
			datatype : 'json',
			colNames : [ 'Inv No', 'Thingy', 'Blank', 'Number', 'Status' ],
			colModel : [ {
				name : 'id',
				index : 'id',
				width : 60,
				sorttype : "int"
			}, {
				name : 'thingy',
				index : 'thingy',
				width : 90,
				sorttype : "date"
			}, {
				name : 'blank',
				index : 'blank',
				width : 30
			}, {
				name : 'number',
				index : 'number',
				width : 80,
				sorttype : "float"
			}, {
				name : 'status',
				index : 'status',
				width : 80,
				sorttype : "float"
			} ],
			postData : {},
			rowNum : 20,
			rowList : [ 20, 40, 60 ],
			height : 200,
			autowidth : true,
			rownumbers : true,
			pager : '#pager',
			sortname : 'id',
			viewrecords : true,
			sortorder : "asc",
			emptyrecords : "Empty records",
			loadonce : false,
			loadComplete : function() {
			},
			jsonReader : {
				root : "rows",
				page : "page",
				total : "total",
				records : "records",
				repeatitems : false,
				cell : "cell",
				id : "id"
			},
			caption : 'My first grid'
		// ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}
		});
		// 			var mydata = [	{
		// 								id:48803,
		// 								thingy: 'dsk1',
		// 								blank: '',
		// 								number:'02200220',
		// 								status:'open'
		// 							},
		// 							{
		// 								id:48769,
		// 								thingy: 'appr',
		// 								blank: '',
		// 								number:'77733337',
		// 								status:'entered'
		// 							}
		// 							];

		//     	  for (var i = 0; i <= mydata.length; i++) {
		//     	      $("#grid").jqGrid('addRowData', i + 1, mydata[i]);
		//     	  }

		/*
		$("#grid").jqGrid('setGridParam', {onSelectRow: function(rowid,iRow,iCol,e){alert('row clicked');}});
		 */
		//     	  $("#grid").jqGrid('setGridParam', {ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}});
	});
</script>

<script type="text/javascript">
	$(document).ready(function() {
		jQuery("#datagrid").jqGrid({
			url : '/MavenExample/getAllJobs',
			datatype : 'json',
			mtype : 'GET',
			colNames : [ 'id', 'jobname'],
			colModel : [ {
				name : 'id',
				index : 'id',
				width : 55,
				editable : false,
				editoptions : {
					readonly : true,
					size : 10
				}
			}, 
// 			{
// 				name : 'familydesc',
// 				index : 'familydesc',
// 				width : 80,
// 				editable : true,
// 				editoptions : {
// 					size : 10
// 				}
// 			} 
// 			 {
// 				name : 'lastname',
// 				index : 'lastname',
// 				width : 80,
// 				editable : true,
// 				editoptions : {
// 					size : 10
// 				}
// 			}
			{
				name : 'jobname',
				index : 'jobname',
				width : 90,
				editable : true,
				editoptions : {
					size : 25
				}
			}
			],
			jsonReader : {
				root : "rows",
				page : "page",
				total : "total",
				records : "records",
				repeatitems : false,
			},
			//jsonReader: { repeatitems: false, id: "id", root: function(obj) { return obj; }},
			rowNum : 10,
			rowList : [ 5, 10, 15, 20, 25, 30, 35 ],
			pager : '#navGrid',
			sortname : 'id',
			sortorder : "desc",
			height : 210,
			viewrecords : true,
			caption : "Example"
		});
		// 	jQuery("#datagrid").jqGrid('navGrid', '#navGrid', {edit : true,
		// 		add : true,
		// 		del : true
		// 	});
		//var mydata = $("#datagrid").jqGrid('getGridParam','data');
	});
</script>
<script type="text/javascript">
	// -- test operation of json => true
	/*
	$(document).ready(function() {
		//alert('fff');
		var temp;
		$.ajax({
			url : '/MavenExample/getAll',
			type : 'GET',
			dataType : 'json',
			success : function(data) {
				//called when successful
				//$('#ajaxphp-results').html(data);
				alert(data.page);
			},
			error : function(e) {
				alert('fail');
			}
		});
	});
	*/
</script>
</head>
<body>
	<h2>Register Job Information</h2>
	<label id="lblmsgsucess" style="color: green;"></label>
	<label id="lblmsgfail" style="color: red;"></label>
	<input type="hidden" id="message" value="${message}" />
	<form:form method="POST" action="/MavenExample/addJob"
		modelAttribute="job">
		<form:input path="jobname" />
		<br />
		<form:textarea path="jobdesc" />
		<input type="submit" value="Submit" />
	</form:form>
	<table id="datagrid"></table>
	<div id="navGrid"></div>
</body>
</html>